@if (content) {
  <div class="article m-bottom">
    @if (content.banner) {
      <app-article-banner [content]="content.banner" />
    }
    <div class="container">
      <div class="article-inner m-top-sm flex flex-col md:flex-row md:gap-5">
        <div class="article-node flex-12/12 md:flex-{{ content.sidebar ? '9' : '12' }}/12">
          <h2 class="title">
            {{ content.title }}
          </h2>
          <div class="article-meta m-y-xs flex justify-between items-center">
            @if (content.meta) {
              <app-article-meta [content]="content.meta" />
            }
          </div>
          <mat-divider />
          <div class="article-body relative">
            @if (canAccess) {
              <div class="article-body m-y-sm" [innerHTML]="content.body | safeHtml"></div>
            } @else {
              @if (content.body) {
                <div class="article-body m-y-sm relative">
                  <div
                    [innerHTML]="content.body | stripTags: 'p' | trim | shorten: 1000 : '...'"
                  ></div>
                  <div class="shadow"></div>
                </div>
              }
              @if (!(user$ | async)) {
                <div
                  class="auth line p-y-sm p-x-sm w-full text-center flex justify-center items-center"
                >
                  <a
                    href="javascript:void(0)"
                    (click)="openLogin()"
                    [innerHTML]="loginConfig?.label | safeHtml"
                  ></a>
                </div>
              }
            }
          </div>
          @if (content.bottom) {
            <div class="article-bottom m-y">
              @for (action of content.bottom; track action) {
                <app-dynamic-component [inputs]="action" />
              }
            </div>
          }
          @if (content.actions) {
            <div class="ations m-y">
              @for (action of content.actions; track action) {
                <app-dynamic-component [inputs]="{ content: action, data: content.params }" />
              }
            </div>
          }
          @if (user$ | async) {
            @if (coreConfig.article?.comment?.enable && content.params?.comment) {
              <app-comment-form [content]="content" [type]="'add'" />
              <app-comment-list [comments]="comments" [content]="content" />
            }
          }
        </div>
        @if (content.sidebar) {
          <app-sidebar class="flex-12/12 md:flex-3/12" [content]="content.sidebar" />
        }
      </div>
    </div>
  </div>
}
